<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>商品列表浏览</title>
	<link rel="stylesheet" href="static/assets/global/plugins/bootstrap/css/bootstrap.min.css"  rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="static/assets/global/css/components.css"  rel="stylesheet" type="text/css">
	<link rel="stylesheet" href="static/assets/admin/pages/css/login.css"  rel="stylesheet" type="text/css">
	<script src="static/assets/global/plugins/jquery-1.11.0.min.js" type="text/javascript"></script>
</head>
<body>
	<div class="content">
		<h3 class="form-title">商品列表浏览</h3>
		<div class="table-responsive">
			<table class="table">
				<theader>
					<tr>
						<th>商品名</th>
						<th>商品图片</th>
						<th>商品描述</th>
						<th>商品价格</th>
						<th>商品库存</th>
						<th>商品销量</th>
					</tr>
				</theader>
				<tbody id="container">
				</tbody>
			</table>
		</div>
	</div>
</body>
<script>
	jQuery(document).ready(function(){
		var g_itemList = [];
		$.ajax({
			type:'GET',
			url:'http://localhost:8090/item/list',
			xhrFields:{
				withCredentials:true
			},
			success:function(data){
				if(data.status == "success"){
					g_itemList = data.data;
					reloadDom();
				}else{
					alert("获取商品信息失败，原因为" + data.data.errMsg);
				}
			},
			error:function(data){
				alert("获取商品信息失败，原因为" + data.responseText);
			}
		});

		function reloadDom(){
			for(var i = 0;i < g_itemList.length;i++){
				var itemVO = g_itemList[i];
				var dom = "<tr data-id='"+ itemVO.id + "'id='itemDetail" + itemVO.id + "'><td>" + itemVO.title + "</td><td><img style='width:100px;height:auto;' src='" + itemVO.imgUrl+ "'/></td><td>" + itemVO.description+ "</td><td>" + itemVO.price+ "</td><td>" + itemVO.stock+ "</td><td>" + itemVO.sales+ "</td></tr>";
				$("#container").append($(dom));
				$("#itemDetail" + itemVO.id).on('click',function(e){
					window.location.href="getitem.html?id="+$(this).data("id");
				});
			}
		}

	})

</script>
</html>